<template>
  <div class="wrapper">
    <div class="game-zone">
      <div class="checkerboard">
        <div class="coordinate-x">
          <div class="o coordinate-item"></div>
          <div class="coordinate-item" v-for="(item,index) in state.d" :key="index">{{item}}</div>
        </div>
        <div class="coordinate-y-inner">
          <div class="coordinate-y">
            <div class="coordinate-item" v-for="(item,index) in state.d" :key="index">{{item}}</div>
          </div>
          <div class="coordinate-inner" v-for="(x,index) in state.x">
            <div @click="clickCoordinate(x,y)" class="checkerboard-item" :class="directionFlightObject2(x,y)"
                 v-for="(y,index) in state.y">
              {{showAttackRecord(x,y)}}
            </div>
          </div>
        </div>
      </div>
      <div class="flight-direction">
        <div class="flight-direction-inner" v-for="x in 5">
          <div class="checkerboard-item" v-for="y in 5"
               :class="directionFlightObject(x,y)"
          ></div>
        </div>
        <div class="flight-direction-botton">
          <button @click="replaceDirection" class="button">换方向</button>
        </div>
      </div>
    </div>
    <div class="operation-zone">
      <button @click="confirmFlight" class="button">确认放置</button>
      <button @click="resetGame" class="button">重置游戏</button>
    </div>
  </div>
</template>
<script setup>
    import {computed, getCurrentInstance, onMounted, reactive} from "vue";

    const {proxy} = getCurrentInstance();

    const state = reactive({
        d: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        y: 10,
        x: 10,
        gemeStatus: 0, // 0:准备阶段（飞机方向/放置飞机） 1:比赛阶段（攻击）
        // type 1:头 2:身子   direction: 0:头朝上
        direction: [
            [
                {d: [1, 3], type: 1},
                {d: [2, 1], type: 2},
                {d: [2, 2], type: 2},
                {d: [2, 3], type: 2},
                {d: [2, 4], type: 2},
                {d: [2, 5], type: 2},
                {d: [3, 3], type: 2},
                {d: [4, 2], type: 2},
                {d: [4, 3], type: 2},
                {d: [4, 4], type: 2},
            ],
            [
                {d: [3, 1], type: 1},
                {d: [1, 2], type: 2},
                {d: [2, 2], type: 2},
                {d: [3, 2], type: 2},
                {d: [4, 2], type: 2},
                {d: [5, 2], type: 2},
                {d: [3, 3], type: 2},
                {d: [3, 4], type: 2},
                {d: [2, 4], type: 2},
                {d: [4, 4], type: 2},
            ],
            [
                {d: [5, 3], type: 1},
                {d: [2, 2], type: 2},
                {d: [4, 1], type: 2},
                {d: [4, 2], type: 2},
                {d: [4, 3], type: 2},
                {d: [4, 4], type: 2},
                {d: [4, 5], type: 2},
                {d: [3, 3], type: 2},
                {d: [2, 3], type: 2},
                {d: [2, 4], type: 2}
            ],
            [
                {d: [3, 4], type: 1},
                {d: [3, 3], type: 2},
                {d: [1, 3], type: 2},
                {d: [4, 1], type: 2},
                {d: [3, 1], type: 2},
                {d: [4, 3], type: 2},
                {d: [5, 3], type: 2},
                {d: [3, 2], type: 2},
                {d: [2, 1], type: 2},
                {d: [2, 3], type: 2}
            ]
        ],
        directionType: 0,
        flightCoordinate: [],
        alreadyAttack: []
    });

    // 画飞机方向
    const directionFlightObject = (x, y) => {
        const direction = state.direction[state.directionType]
        let header = false;
        let body = false;
        for (let i = 0; i < direction.length; i++) {
            if (direction[i].d[0] === x && direction[i].d[1] === y) {
                if (direction[i].type === 1) {
                    header = true
                    break;
                } else if (direction[i].type === 2) {
                    body = true
                    break;
                }
            }
        }
        return {
            "flight-header": header,
            "flight-body": body
        }
    };

    // 预置放飞机
    const directionFlightObject2 = (x, y) => {
        if (state.gemeStatus !== 0) {
            return {
                "flight-header": false,
                "flight-body": false
            }
        }
        if (state.flightCoordinate && state.flightCoordinate.length > 0) {
            const direction = state.flightCoordinate;
            let header = false;
            let body = false;
            for (let i = 0; i < direction.length; i++) {
                if (direction[i].d[0] === x && direction[i].d[1] === y) {
                    if (direction[i].type === 1) {
                        header = true
                        break;
                    } else if (direction[i].type === 2) {
                        body = true
                        break;
                    }
                }
            }
            return {
                "flight-header": header,
                "flight-body": body
            }
        } else {
            return {
                "flight-header": false,
                "flight-body": false
            }
        }
    };


    // 点击棋盘
    const clickCoordinate = (x, y) => {
        if (state.gemeStatus === 0) {
            placeFlight(x, y)
        } else if (state.gemeStatus === 1) {
            attackFlight(x, y)
        }
    };

    // 放置飞机
    const placeFlight = (x, y) => {
        if (state.directionType === 0) {
            if (x < 3 || x > 8 || y > 7) {
                console.log("不能放这里")
                return
            }
        } else if (state.directionType === 1) {
            if (y < 3 || y > 8 || x > 7) {
                console.log("不能放这里")
                return
            }
        } else if (state.directionType === 2) {
            if (x < 3 || x > 8 || y < 4) {
                console.log("不能放这里")
                return
            }
        } else if (state.directionType === 3) {
            if (y < 3 || y > 8 || x < 4) {
                console.log("不能放这里")
                return
            }
        }
        var _x = state.direction[state.directionType][0].d[0] - y;
        var _y = state.direction[state.directionType][0].d[1] - x;
        state.flightCoordinate = state.direction[state.directionType].map((v) => {
            return {d: [v.d[1] - _y, v.d[0] - _x], type: v.type}
        })
        console.log(state.flightCoordinate);

    }

    // 攻击飞机
    const attackFlight = (x, y) => {
        let index = state.alreadyAttack.findIndex((v) => {
            return v.x === x && v.y === y;
        })
        if (index === -1) {
            state.alreadyAttack.push({x, y})
            if (x === state.flightCoordinate[0].d[0] && y === state.flightCoordinate[0].d[1]) {
                alert("已击落地方飞机")
                resetGame()
            }
        }
    }

    const showAttackRecord = (x, y) => {
        if (state.gemeStatus === 1) {
            let isAttack = false;
            let isInjured = false
            for (let i = 0; i < state.alreadyAttack.length; i++) {
                if (state.alreadyAttack[i].x === x && state.alreadyAttack[i].y === y) {
                    isAttack = true;
                    for (let j = 0; j < state.flightCoordinate.length; j++) {
                        if (x === state.flightCoordinate[j].d[0] && y === state.flightCoordinate[j].d[1]) {
                            isInjured = true
                           break
                        }
                    }
                    break;
                }
            }
            if(isInjured){
                return "x"
            }
            if(isAttack){
                return "o"
            }
        } else {
            return ""
        }

    }

    const replaceDirection = () => {
        if (state.directionType > 2) {
            state.directionType = 0
        } else {
            state.directionType++
        }
    }

    // 确认放置
    const confirmFlight = () => {
        if (state.flightCoordinate && state.flightCoordinate.length > 0) {
            state.gemeStatus = 1;
        }
    }

    const resetGame = () => {
        state.flightCoordinate = [];
        state.alreadyAttack = [];
        state.gemeStatus = 0;
        state.directionType = 0
    }
</script>
<style lang="less">
  @import "assets/css.less";
</style>

